<template>
    <div>
        <el-card class="box-card">
            <div slot="header" style="text-align:left">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label>
                        <el-input v-model="searchAddress" placeholder="地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="local">定位</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reDraw">重绘</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toadd">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div style="height:700px" id="container"></div>
        </el-card>
        <el-drawer :visible.sync="drawer" :with-header="false">
            <el-card class="box-card">
                <div slot="header" style="text-align:left">
                   
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
                     <el-form-item label="预览" >
                        <img :src="preImage">
                    </el-form-item>
                    <el-form-item label="地块名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                     <el-form-item label="地块地址" prop="address">
                        <el-input v-model="ruleForm.address"></el-input>
                    </el-form-item>

                    <el-form-item label="面积" prop="acreage">
                        <el-input placeholder="面积" v-model="ruleForm.acreage">
                            <template slot="append">km²(平方千米)</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="负责人" prop="person">
                        <el-input v-model="ruleForm.person" placeholder="负责人"></el-input>
                    </el-form-item>
                     <el-form-item label="联系方式" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="负责人电话"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-drawer>
    </div>
</template>

<script>
import mapUtil from '@/libs/map/map';
import { farmAdd ,farmLoad} from "@/libs/api.js";
export default {
    data() {
        return {
            localPoint: null,//定位点
            searchAddress:"",//
            drawer: false,
            mapInfo: null,//百度地图map封装
            overlays: [],//绘制的图层
            ruleForm: {},
            preImage:"",//预览地址
            rules: {
                name: [
                    { required: true, message: '请填写地块名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请填写地块地址', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                ],
               phone: [
                    { required: true, message: '请填写负责人电话', trigger: 'blur' },
                  {
                        pattern: /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/,
                        message: '手机格式不正确',
                        trigger: 'blur'
                    }
                ],

                acreage: [
                    { required: true, message: '请填面积', trigger: 'blur' },
                    {
                        pattern: /^[1-9]\d*$|^[0-9]+(.[0-9]{1,2})?$/,
                        message: '请输入正确的面积量',
                        trigger: 'blur'
                    }
                ],
                person: [
                    { required: true, message: '请填写负责人姓名', trigger: 'blur' },
                    {
                        pattern: /^[\u4E00-\u9FA5]{2,4}$/,
                        message: '请输入合理中文名称',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        loadMap() {
            mapUtil.loadBaiduMap('container').then(mapInfo => {
                this.mapInfo = mapInfo;
                let map = mapInfo.map;
                let drawingManager = mapInfo.drawingManager;
                map.enableScrollWheelZoom(true);
                //  map.addControl(mapUtil.loadBaiduSearch());
                var mapType = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
                map.addControl(mapType);
                let ref = this;
                this.localPoint = new BMap.Point(116.404, 39.915);
                // 创建点坐标
                map.centerAndZoom(this.localPoint, 15);
                //绘图事件
                //添加鼠标绘制工具监听事件，用于获取绘制结果
                drawingManager.enableCalculate();
                drawingManager.addEventListener('overlaycomplete', function(e) {
                    e.overlay.label = e.label;
                    ref.overlays.push(e.overlay);
                });
                this.loadFarm(map);
            });
        },
        local() {
            var myGeo = new BMap.Geocoder();
            let ref = this;
            myGeo.getPoint(this.searchAddress,function(point) {
                    if (point) {
                         ref.localPoint = point;
                        ref.mapInfo.map.centerAndZoom(point, 16);
                        ref.mapInfo.map.addOverlay(new BMap.Marker(point));
                    } else {
                        alert('您选择地址没有解析到结果!');
                    }
                }, '');
        },
        reDraw() {
            if (this.overlays.length > 0) {
                for (var i = 0; i < this.overlays.length; i++) {
                    this.mapInfo.map.removeOverlay(this.overlays[i]);
                    if (this.overlays[i].label) {
                        this.mapInfo.map.removeOverlay(this.overlays[i].label);
                    }
                }
                this.overlays = [];
            }
        },
        toadd() {
            // this.preImage=mapUtil.getPreImage(this.localPoint,this.overlays,null,null,this.mapInfo.map.getZoom());
            this.ruleForm.maptemp={};
            this.preImage=mapUtil.getPreImage(this.mapInfo.map,this.ruleForm.maptemp);
            this.drawer = true;
            let result= mapUtil.parseOverlay(this.mapInfo.map);
            this.ruleForm.points=JSON.stringify(result);
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.ruleForm.mapType="Baidu";
                    this.ruleForm.preImage=this.preImage;
                    this.ruleForm.centerPoint=this.ruleForm.maptemp.center;
                    farmAdd(this.ruleForm).then(res =>{
                        this.$util.success();
                         this.$router.push({"path":"/plant/farm/list"});
                    })
                   
                } else {
                    return false;
                }
            });
        },
        loadFarm(map){
            if(this.$route.query.id){
                farmLoad(this.$route.query.id).then((res) => {
                    this.ruleForm=res;
                    let centerPoint=res.centerPoint.split(",");
                    this.localPoint = new BMap.Point(centerPoint[0], centerPoint[1]);
                   // 创建点坐标
                    map.setCenter(this.localPoint);
                    this.overlays = mapUtil.setOverlay(map,JSON.parse(res.points));
                })
            }
        }
    },
    mounted() {
        this.loadMap();
       
    }
};
</script>